<% content_for(:head) do %>
  <title><%= @course.name %> | <%= t(".title") %> </title>
<% end %>
<div class="relative" id="schoolrouter-innerpage-data">
  <% if @course.calendars.present? %>
    <div class="max-w-6xl mx-auto px-5 pb-6 mt-8">
      <div class="flex items-end justify-between gap-2">
        <h1 class="text-xl font-semibold"> <%= t(".calendar") %>  </h1>
        <div>
          <%= link_to new_school_course_calendar_event_path(@course, calendar_id: params[:calendar_id]), class: "btn btn-primary block" do %>
            <i class="if i-plus-regular if-fw" ></i>
            <%= t(".add_event_button") %>
          <% end %>
        </div>
      </div>
      <div class="mt-4 grid grid-cols-12 bg-gray-50 rounded-lg border border-gray-200 relative">
        <div class="col-span-4 p-6 border-e border-gray-200">
          <div class="sticky top-4">
            <div id="course-calendar-picker" class="pb-4 " >
              <div data-re-component="CalendarsIndex__DatePicker" data-re-json=<%=@presenter.date_picker_props%>></div>
            </div>
            <div class="pt-6 border-t border-gray-200 flex items-center justify-between gap-2 p-1">
              <p class="text-lg font-semibold "><%= t(".calendars") %> </p>
              <a
                class="block btn btn-default btn-small"
                href="<%= new_school_course_calendar_path(@course, calendar_id: params[:calendar_id])%>">
                <i class="if i-plus-regular if-fw" ></i>
                <span><%= t(".add_calendar_button") %> </span>
              </a>
            </div>
            <% @course.calendars.each do |calendar|  %>
              <div class="bg-white mt-2 px-2 py-1 rounded-md text-sm flex items-center justify-between">
                <span class="flex items-center gap-2 font-medium">
                  <%= calendar.name %>
                </span>
                <a href="<%= edit_school_course_calendar_path(@course, calendar) %>" class="bg-gray-50 p-2 rounded-md hover:bg-gray-200 hover:text-primary-500 focus:ring-2 focus:ring-focusColor-500 transition">
                  <i class="if i-edit-regular if-fw text-base" ></i>
                </a>
              </div>
            <% end %>
          </div>
        </div>
        <div class="col-span-8 bg-white flex-1 rounded-e-lg">
          <div class="flex gap-4 items-center justify-between bg-gray-50 rounded-tr-lg p-6">
            <p class="text-lg font-semibold"><%= t(".events") %></p>
            <div class="flex items-center gap-2">
              <label class="text-sm font-medium flex-shrink-0 text-gray-600"><%= t(".calendar_filter_label") %></label>
              <div data-re-component="SelectLink" data-re-json="<%= @presenter.calendar_link_props.to_json %>"></div>
            </div>
          </div>
          <div class="flex flex-col gap-8 divide-y p-6">
            <div>
              <div>
                <p class="font-semibold text-sm text-gray-600">
                  <%= @presenter.selected_date %>
                  <% if @presenter.today? %>
                    <span aria-hidden="true">-</span>
                    <em class="font-normal"><%= t(".today") %></em>
                  <% end %>
                </p>
                <% if @presenter.events_for_day.blank? %>
                  <div class="mt-3 flex flex-col items-center text-center p-4 bg-gray-100 rounded-lg">
                    <i class="if i-calendar-solid if-fw text-3xl"></i>
                    <p class="text-sm font-semibold mt-4"><%= t(".empty_events") %></p>
                  </div>
                <% end %>
              </div>
              <div>
                <div class="mt-3 flex flex-col gap-4">
                  <% @presenter.events_for_day.each do |event|%>
                    <%= render partial: "event_card", locals: {event: event} %>
                  <% end %>
                </div>
              </div>
            </div>
            <% if @presenter.upcoming_events_for_month.present? %>
              <div class="pt-4">
                <p class="font-semibold text-sm text-gray-600"> <%= t(".upcoming_events_in") + " " + @presenter.selected_month %></p>
                <div>
                  <div class="mt-3 flex flex-col gap-4">
                    <% @presenter.upcoming_events_for_month.each do |event|%>
                      <%= render partial: "event_card", locals: {event: event} %>
                    <% end %>
                  </div>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  <% else %>
    <div class="max-w-6xl mx-auto px-5 pb-6 mt-8">
      <div class="bg-gray-50 p-12 flex flex-col items-center justify-center rounded-lg ">
        <div class="w-64">
          <%= image_tag 'shared/no-calendar-icon.svg', class: 'w-full', alt: 'Internal server error' %>
        </div>
        <h2 class="font-semibold mt-3"><%= t(".no_calendars_message") %></h2>
        <p class="text-sm"><%= t(".no_calendars_sub_text") %></p>
        <a
          class="block btn btn-primary mt-4"
          href=<%= new_school_course_calendar_path(@course)%>>
          <i class="if i-plus-regular if-fw" ></i>
          <span><%= t(".add_calendar_button") %> </span>
        </a>
      </div>
    </div>
  <% end %>
</div>
